<template>
  <div>

    <div class="form-body">
      <div class="form-state-s" v-if="p_state > 0">{{ state_arr[p_state] }}</div>
      <el-tabs v-model="activeName">
        <el-tab-pane label="报案信息" name="first">
          <div class="form-window" v-if="!form_id">
            <div class="form-window-line"></div>
            <div class="form-window-txt">保险信息</div>
          </div>
          <div class="form-form">
            <el-descriptions class="margin-top" :column="2">
              <el-descriptions-item label="保险名称">{{ info.bx_name }}</el-descriptions-item>
              <el-descriptions-item label="保单号">{{ info.bd_no }}</el-descriptions-item>
              <el-descriptions-item label="保障时间">{{ info.start_time }} - {{ info.end_time }}</el-descriptions-item>
              <el-descriptions-item label="投保人联系人"> {{ info.insure_contact }} </el-descriptions-item>
              <el-descriptions-item label="投保人联系方式">{{ info.insure_mobile }}</el-descriptions-item>
            </el-descriptions>
          </div>
          <div class="form-window">
            <div class="form-window-line"></div>
            <div class="form-window-txt">投保企业</div>
          </div>
          <div class="form-form">
            <el-form label-position="left" label-width="140px" size="small" :disabled="(form_id) ? true : false">
              <el-form-item label="出险被保人">{{ info.insure }}</el-form-item>
              <el-form-item label="报案号">
                <div style="width: 100%;position: relative">
                  <el-input placeholder="请输入报案号" v-model="form.ba_no" class="form-input"></el-input>
                  <el-button type="text" style="position: absolute;right: 10px;top: 0px"
                    @click="view()">报案号获取流程</el-button>
                </div>
              </el-form-item>
              <el-form-item label="出险时间">
                <el-date-picker v-model="form.cx_time" type="datetime" placeholder="出险时间" format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="所属地区">
                <div class="form-address">
                  <el-select v-model="form.cx_province" @change="changeInsureProvince()" class="form-seletc">
                    <el-option v-for="(item, key) in insure_pro" :key="'insure' + key" :label="item.label"
                      :value="item.label"></el-option>
                  </el-select>
                  <el-select v-model="form.cx_city" @change="changeInsureCity()" class="form-seletc">
                    <el-option v-for="(item, key) in insure_city" :key="'insure' + key" :label="item.label"
                      :value="item.label"></el-option>
                  </el-select>
                  <el-select v-model="form.cx_area" class="form-seletc">
                    <el-option v-for="(item, key) in insure_area" :key="'insure' + key" :label="item.label"
                      :value="item.label"></el-option>
                  </el-select>
                  <el-input placeholder="请输入详细地址" v-model="form.cx_address" class="form-seletc-addr"></el-input>
                </div>
              </el-form-item>
              <el-form-item label="从事工作">
                <el-input placeholder="请输入从事工作" v-model="form.cx_work" class="form-input"></el-input>
              </el-form-item>
              <el-form-item label="现场照片">
                <div class="pei-form-upload">
                  <div class="pei-imgs-bxo" v-for="(item, key) in form.scene_img" :key="'img' + key">
                    <img :src="item" @click="seeModel(item)">
                    <div class="pei-imgs-delete" @click="deleteImg(key)" v-if="!form_id || p_state == 7">
                      <i class="el-icon-close"></i>
                    </div>
                  </div>
                  <div class="pei-form-up-add" v-if="!form_id || p_state == 7">
                    <img src="https://jy-yyzj.oss-cn-shanghai.aliyuncs.com/jdbx/pc/pei-up-icon.png"
                      class="pei-form-up-add-icon">
                    <div class="up-box-txt">上传图片</div>
                    <input type="file" class="upload-img-file" @change="upload($event, 1)" ref="multifile" />
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="出险类型">
                <el-select v-model="form.cx_classify">
                  <el-option v-for="(item, key) in info.classify" :key="'c' + key" :label="item"
                    :value="key"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="出险事故描述">
                <el-input placeholder="请输入从事工作" v-model="form.memo" class="form-input" type="textarea"
                  :rows="4"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div class="form-window">
            <div class="form-window-line"></div>
            <div class="form-window-txt">报案人</div>
          </div>
          <div class="form-form">
            <el-form label-position="left" label-width="140px" size="small" :disabled="(form_id) ? true : false">
              <el-form-item label="报案人姓名">
                <el-input placeholder="请输入报案人姓名" v-model="form.ba_user" class="form-input"></el-input>
              </el-form-item>
              <el-form-item label="报案人电话">
                <el-input placeholder="请输入报案人电话" v-model="form.ba_mobile" class="form-input"></el-input>
              </el-form-item>
              <el-form-item label="与出险人关系">
                <el-input placeholder="请输入与出险人关系" v-model="form.ba_relevance" class="form-input"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div class="form-window">
            <div class="form-window-line"></div>
            <div class="form-window-txt">出险人</div>
            <div class="form-window-btn">
              <div style="margin-right: 20px;">
                <el-select v-model="selectVal" value-key="id_card" filterable clearable placeholder="请输入关键词">
                  <el-option v-for="item in options" :key="item.id_card" :label="item.label" :value="item">
                  </el-option>
                </el-select>
              </div>

              <el-button size="mini" class="com-btn" icon="el-icon-plus" @click="addUser()"
                :disabled="(form_id) ? true : false">添加</el-button>
            </div>
          </div>
          <div class="form-form">
            <div class="pei-card">
              <el-table size="mini" :data="form.user" :show-header="false">
                <el-table-column width="80px">
                  <template slot-scope="item">出险人{{ item.$index + 1 }}</template>
                </el-table-column>
                <el-table-column>
                  <template slot-scope="item">
                    <el-input size="mini" :disabled="true" v-model="item.row.name" placeholder="请输入出险人姓名"></el-input>
                  </template>
                </el-table-column>
                <el-table-column>
                  <template slot-scope="item">
                    <el-input size="mini" :disabled="true" v-model="item.row.id_card"
                      placeholder="请输入出险人身份证"></el-input>
                  </template>
                </el-table-column>
                <el-table-column width="60px">
                  <template slot-scope="item">
                    <div v-if="item.row.state < 1" @click="deleteUser(item.$index)"><i
                        class="el-icon-delete delete-user"></i></div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div style="text-align: center">
            <el-button size="small" class="com-btn" @click="submitData()" v-if="!form_id">提交报案</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="理赔材料" name="second" v-if="form_id">
          <div>
            <div class="form-window">
              <div class="form-window-line"></div>
              <div class="form-window-txt">理赔材料</div>
            </div>
            <div class="form-form">
              <el-form label-position="left" label-width="140px" size="small">
                <el-form-item label="图片">
                  <div class="pei-form-upload">
                    <div class="pei-imgs-bxo" v-for="(item, key) in form.material_img" :key="'imgs' + key">
                      <img :src="item" @click="seeModel(item)">
                      <div class="pei-imgs-delete" @click="deleteImgs(key)" v-if="form_id && form.state == 1">
                        <i class="el-icon-close"></i>
                      </div>
                    </div>
                    <div class="pei-form-up-add" v-if="form_id && form.state == 1">
                      <img src="https://jy-yyzj.oss-cn-shanghai.aliyuncs.com/jdbx/pc/pei-up-icon.png"
                        class="pei-form-up-add-icon">
                      <div class="up-box-txt">上传图片</div>
                      <input type="file" class="upload-img-file" @change="upload($event, 2)" ref="multifile" />
                    </div>
                  </div>
                </el-form-item>
                <el-form-item label="文件">
                  <div>
                    <div v-for="(item, key) in form.material_file" :key="'file' + key">
                      <!--                  <span></span>
                  <el-button></el-button>
                  <div>
                    <span>{{item.url}}</span>
                  </div>-->
                      <a :href="item.url" :download="item.name">{{ item.name }}</a>
                      <span v-if="form_id && form.state == 1" @click="deleteFile(key)" class="delete-file-icon"><i
                          class="el-icon-delete"></i></span>
                    </div>
                    <div class="pei-up-load-file" v-if="form_id && form.state == 1">
                      <el-button size="mini" icon="el-icon-upload2">上传文件</el-button>
                      <input type="file" class="upload-img-file" @change="upload($event, 3)" ref="multifile" />
                    </div>
                  </div>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <div style="text-align: center">

            <el-button size="small" class="com-btn" @click="submitUpload()"
              v-if="form_id && form.state == 1">上传理赔材料</el-button>

          </div>
        </el-tab-pane>
        <el-tab-pane label="快递信息" name="third" v-if="form_id">
          <div>
            <div class="form-window">
              <div class="form-window-line"></div>
              <div class="form-window-txt">快递单号</div>
            </div>
            <div class="form-form">
              <el-form label-position="left" label-width="140px" size="small"
                :disabled="(form_id && form.state != 1) ? true : false">
                <el-form-item label="快递公司">
                  <el-input placeholder="请输入快递公司" v-model="form.logistics" class="form-input"></el-input>
                </el-form-item>
                <el-form-item label="快递单号">
                  <el-input placeholder="请输入快递单号" v-model="form.logistics_no" class="form-input"></el-input>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <div style="text-align: center">
            <el-button size="small" class="com-btn" @click="submitKd()"
              v-if="form_id && form.state == 1">确认发件</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>






    </div>
    <el-dialog :visible.sync="img_model" title="查看大图" width="500px" :append-to-body="true">
      <img :src="img_src" style="display:block;width: 100%">
    </el-dialog>
    <el-dialog title="报案号获取" :visible.sync="viewDialog" width="450px" :append-to-body="true">
      <div style="width: 100%;line-height: 30px;font-size: 18px;margin-bottom: 20px">
        进入公众号搜索【<span style="font-weight: bold">太平洋产险华南运营中心</span>】
      </div>
      <div style="width: 100%;">
        <el-image fit="cover" src="https://djb.oss-cn-shanghai.aliyuncs.com/static/liucheng/liucheng1.jpg"
          style="width: 100%"></el-image>
      </div>
      <div style="width: 100%;line-height: 30px;font-size: 18px;margin-bottom: 20px">
        点击【<span style="font-weight: bold;">太平洋产险华南运营中心</span>】并关注公众号
      </div>
      <div style="width: 100%;">
        <el-image fit="cover" src="https://djb.oss-cn-shanghai.aliyuncs.com/static/liucheng/liucheng2.jpg"
          style="width: 100%"></el-image>
      </div>
      <div style="width: 100%;">
        <el-image fit="cover" src="https://djb.oss-cn-shanghai.aliyuncs.com/static/liucheng/liucheng3.jpg"
          style="width: 100%"></el-image>
      </div>
      <div style="width: 100%;line-height: 30px;font-size: 18px;margin-bottom: 20px">
        点击【<span style="font-weight: bold;">享服务</span>】选择【<span style="font-weight: bold;">95500客服</span>】
      </div>
      <div style="width: 100%;">
        <el-image fit="cover" src="https://djb.oss-cn-shanghai.aliyuncs.com/static/liucheng/liucheng4.png"
          style="width: 100%"></el-image>
      </div>
      <div style="width: 100%;line-height: 30px;font-size: 18px;margin-bottom: 20px">
        输入【<span style="font-weight: bold;">转人工</span>】点击【<span style="font-weight: bold;">转人工</span>】服务
      </div>
      <div style="width: 100%;">
        <el-image fit="cover" src="https://djb.oss-cn-shanghai.aliyuncs.com/static/liucheng/liucheng5.png"
          style="width: 100%"></el-image>
      </div>
      <div style="width: 100%;line-height: 30px;font-size: 18px;margin-bottom: 20px">
        输入【<span style="font-weight: bold;">非车险报案</span>】等待客服，按照要求提供报案材料即可，收到报案号才算报案成功。
      </div>
      <div style="width: 100%;">
        <el-image fit="cover" src="https://djb.oss-cn-shanghai.aliyuncs.com/static/liucheng/liucheng6.png"
          style="width: 100%"></el-image>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import province from "../../assets/js/province";
import city from "../../assets/js/city";
import area from "../../assets/js/area";

export default {
  data() {
    return {
      id: 0,
      info: {},
      form: {
        id: 0,
        ba_no: '',
        cx_time: '',
        cx_province: '',
        cx_city: '',
        cx_area: '',
        cx_address: '',
        cx_work: '',
        cx_classify: 0,
        scene_img: [],
        memo: '',
        ba_user: '',
        ba_mobile: '',
        ba_relevance: '',
        user: []
      },
      pro_index: 0,
      city_index: 0,
      area_index: 0,
      insure_pro: [],
      insure_city: [],
      insure_area: [],
      form_id: 0,
      p_state: 0,
      state_arr: ['', '处理中', '已拒赔', '已赔付', '已取消'],
      tabs: ['报案信息', '理赔材料', '快递信息'],
      img_model: false,
      img_src: '',
      viewDialog: false,
      activeName: 'first',
      options: [],
      selectVal: {}
    }
  },
  mounted() {
    this.id = this.$route.params.id;
    this.form_id = this.$route.query.id;
    if (this.form_id) this.getInfo();
    this.getData();
    this.getSearch()
    this.insureAddr();
    this.form.id = this.id;

  },
  methods: {

    getSearch() {
      this.ajaxs('report/getInsureUser', {
        data: {
          id: this.id
        },
        success: (res) => {
          this.options = res.msg;
          console.log(res)
        }
      })
    },
    view() {
      this.viewDialog = true;
    },
    seeModel(src) {
      this.img_model = true;
      this.img_src = src;
    },
    deleteFile(index) {
      this.form.material_file.splice(index, 1);
    },
    deleteImgs(index) {
      this.form.material_img.splice(index, 1);
    },
    getInfo() {
      this.ajaxs('report/getDetail', {
        data: {
          id: this.form_id
        },
        success: (res) => {
          this.form = res.msg.info;
          this.p_state = res.msg.info.state;
        }
      })
    },
    submit() {
      if (!this.form_id || this.p_state == 7) this.submitData();
      //  if (this.form_id && (this.p_state == 2 || this.p_state == 8)) this.submitUpload();
      // if (this.form_id && this.p_state == 4) this.submitKd();
    },

    //上传快递公司
    submitKd() {
      if (!this.form.logistics) return this.toast(0, '请输入快递公司');
      if (!this.form.logistics_no) return this.toast(0, '请输入快递单号');
      this.ajaxs('report/mailDo', {
        data: {
          id: this.form_id,
          logistics: this.form.logistics,
          logistics_no: this.form.logistics_no
        },
        success: (res) => {
          this.toast(res.code, res.msg);
          if (res.code) {
            this.$router.push({
              path: '/index/pei/index'
            })
          }
        }
      })
    },
    //上传理赔材料
    submitUpload() {
      if (this.form.material_img.length == 0 && this.form.material_file.length == 0) return this.toast(0, '请上传理赔材料');
      this.ajaxs('report/uploadMaterial', {
        data: {
          id: this.form_id,
          material_img: this.form.material_img,
          material_file: this.form.material_file
        },
        success: (res) => {
          this.toast(res.code, res.msg);
          if (res.code) {
            this.$router.push({
              path: '/index/pei/index'
            })
          }
        }
      })
    },
    //提交数据
    submitData() {
      if (!this.form.cx_time) return this.toast(0, '请选择出险时间');
      if (!this.form.cx_province || !this.form.cx_city || !this.form.cx_area || !this.form.cx_address) return this.toast(0, '请完善出险地点');
      if (!this.form.cx_work) return this.toast(0, '请输入从事工作');
      if (!this.form.scene_img.length) return this.toast(0, '请上传现场照片');
      if (!this.form.cx_classify) return this.toast(0, '请选择事故类型');
      if (!this.form.memo) return this.toast(0, '请输入事故描述');
      if (!this.form.ba_user) return this.toast(0, '请输入报案人姓名');
      if (!this.form.ba_mobile) return this.toast(0, '请输入报案人手机');
      if (!this.form.ba_relevance) return this.toast(0, '请输入与出险人关系');
      if (!this.form.user.length) return this.toast(0, '请添加出险人');
      for (var i in this.form.user) {
        if (!this.form.user[i].name) return this.toast(0, '请输入出险人姓名');
        if (!this.form.user[i].id_card) return this.toast(0, '请输入出险人身份证');
      }
      if (this.form_id) this.form.id = this.form_id;
      var url = this.form_id ? 'report/reportEdit' : 'report/reportDo';
      this.ajaxs(url, {
        data: this.form,
        success: (res) => {
          this.toast(res.code, res.msg);
          if (res.code) {
            this.$router.push({
              path: '/index/pei/index'
            })
          }
        }
      })
    },
    deleteUser(index) {
      this.form.user.splice(index, 1);
    },
    addUser() {


      if (this.selectVal.name != undefined) {
        let flag = false;
        this.form.user.forEach(item => {
          if (item.name == this.selectVal.name) {
            flag = true;
          }
        })
        if (flag) {
          this.toast(0, '信息重复')
          return
        }
        let param = {
          name: this.selectVal.name,
          id_card: this.selectVal.id_card,
          state: 0
        }
        this.form.user.push(param);
        this.selectVal = {}
        return;
      } else {
        this.toast(0, '请选择信息')
      }

    },
    deleteImg(index) {
      this.form.scene_img.splice(index, 1);
    },
    //选择文件
    upload(e, index) {
      console.log(e.currentTarget.files[0]);
      var file = e.currentTarget.files;
      this.fileUpload(file[0], index);
    },
    //上传文件
    fileUpload(img, index) {
      if (img == undefined) return false;
      //获取文件后缀名
      var arr = img["name"].split(".");
      var img_type = arr[1];
      let OSS = require("ali-oss");
      let client = new OSS({
        region: this.$region,
        //云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，部署在服务端使用RAM子账号或STS，部署在客户端使用STS。
        accessKeyId: this.$accessKeyId,
        accessKeySecret: this.$accessKeySecret,
        bucket: this.$bucket
      });
      // client.options.endpoint.protocol = "https:";
      //获取当前时间
      var date = new Date();
      var file_name =
        date.getFullYear() +
        "/" +
        (date.getMonth() + 1) +
        "/" +
        date.getDate() +
        "/" +
        date.getHours() +
        "_" +
        date.getMinutes() +
        "_" +
        date.getSeconds() +
        "_" +
        date.getMilliseconds();
      let filename = 'report/' + file_name + "." + img_type;
      let res_file = img;
      let that = this;

      async function put() {
        var fielinput = that.$refs['multifile'];
        fielinput.value = '';
        try {
          //object-name可以自定义为文件名（例如file.txt）或目录（例如abc/test/file.txt）的形式，实现将文件上传至当前Bucket或Bucket下的指定目录。
          await client
            .multipartUpload(filename, res_file, {
              progress: percentage => {
                that.progress = parseInt(percentage * 100);
                console.log('上传进度：' + that.progress);
                //console.log(percentage); // 上传文件进度
              }
            })
            .then(res => {
              // that.img = that.old ? res.name :that.$oss_url + res.name;
              if (index == 1) that.form.scene_img.push(that.$oss_url + res.name);
              if (index == 2) that.form.material_img.push(that.$oss_url + res.name);
              if (index == 3) that.form.material_file.push({ name: img.name, url: that.$oss_url + res.name });
              //that.$emit("change", res.name);
            })
            .catch(err => {
              console.log(err);
              setTimeout(() => {
                that.load = false;
              }, 500);
              return that.$Message.error("文件上传失败");
              //return that.toast(0, "上传失败");
            });
        } catch (e) {
          setTimeout(() => {
            that.load = false;
          }, 500);
          return that.$Message.error("文件上传失败");
        }

      }

      this.load = true;
      this.progress = 0;
      put();
    },
    getData() {
      this.ajaxs('report/report', {
        data: {
          id: this.id
        },
        success: (res) => {
          this.info = res.msg;

        }
      })
    },
    changeInsureProvince() {
      this.city_index = 0;
      this.area_index = 0;
      this.form.cx_city = '';
      this.form.cx_area = '';
      this.insureAddr();
    },
    changeInsureCity() {
      this.area_index = 0;
      this.form.cx_area = '';
      this.insureAddr();
    },
    insureAddr() {
      this.insure_pro = province;
      for (var i in this.insure_pro) {
        if (this.insure_pro[i].label == this.form.cx_province) {
          this.pro_index = i;
        }
      }
      this.insure_city = city[this.pro_index];
      for (var x in this.insure_city) {
        if (this.insure_city[x].label == this.form.cx_city) {
          this.city_index = x;
        }
      }
      this.insure_area = area[this.pro_index][this.city_index];
      for (var y in this.insure_area) {
        if (this.insure_area[y].label == this.form.cx_area) {
          this.area_index = y;
        }
      }
    },
  }
}
</script>

<style scoped>
@import "../../assets/css/index/form.css";
@import "../../assets/css/pei/form.css";

:deep(.el-input--suffix .el-input__inner) {
  height: 32px;
}
</style>
